<template>
	<view class="assetMain">
		<view class="assetList">
		
			<view class="assetListItem">
				<view class="itemHead">
					<view class="itemHeadTitle">
						{{detailInfo.applyUnitName}}
					</view>
					<view class="itemHeadState">
						{{detailInfo.statusCh?detailInfo.statusCh:'未知'}}
					</view>
				</view>
				<view class="itemContent">
					<view class="conCenter">
						<view>申请编号：{{detailInfo.assetApplyNo}}</view>
						<view>申请人：{{detailInfo.applicantName}}</view>
						<view>申请时间：{{detailInfo.applyTime}}</view>
						<view>申请数量：{{detailInfo.applyQty}}</view>
						<view style="color: #999;">备注信息：{{detailInfo.remarks}}</view>
					</view>
					<view class="det-list" v-for="(item,index) in listData">
						<view>资产名称：{{item.assetName}}</view>
						<view>资产编号：{{item.assetNo}}</view>
						<view>调出单位：--</view>
						<view>资产类型：{{item.assetType}}</view>
						<view>申请数量：{{item.applyQty}}</view>
						<view>已实施数量：{{item.execQty}}</view>
						<view>处理类型：--</view>
						<view>处理人：{{item.auditorName}}</view>
						<view>确认人：--</view>
					</view>
			
				</view>
				<!-- <view class="itemHand">
					<view class="btn-green-s btn-s" v-if="item.statusCh=='处理中'||item.statusCh=='待处理'" @click="toPutId(item.assetApplyId)">实施
					</view>
					<view class="btn-black-s btn-s" v-if="item.statusCh=='已确认'" @click="toPut">查看</view>
				</view> -->
			</view>
	
		</view>

		<view class="bottom-btn">
			<view class="buttons">
				<button class="applybtn color-y-bg" @click="toPut">实施</button>
				<button class="applybtn color-b-bg" @click="toConfirm">已收到货物</button>
				<button class="applybtn color-g-bg" @click="qrSign">扫码签收</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		defineComponent,
		ref,
		reactive
	} from 'vue'
	import {
		applyDetail
	} from '@/common/api/assetAPI.ts'
	import {
		onLoad
	} from "@dcloudio/uni-app";

	export default defineComponent({
		setup(props, {
			emit
		}) {
			const listData = ref(); //资产列表数据
			const applyId = ref(); //资产列表数据
			const remarks = ref();
			const detailInfo = ref({});

			// 触发下拉=>开启下拉
			onPullDownRefresh(() => {
				// uni.startPullDownRefresh(); //下拉开启
				getList(applyId.value);
			});

			function getList(assetApplyId) {
				applyId.value = assetApplyId
				applyDetail(assetApplyId).then((res: any) => {
					uni.stopPullDownRefresh(); //关闭下拉
					listData.value = res.data.dtls
					remarks.value = res.data.remarks
					detailInfo.value = res.data
				})
			}

			onLoad((par) => {
				if (par.assetApplyId) {
					getList(par.assetApplyId)
				} else {
					uni.showToast({
						icon:'none',
						title:'数据获取失败！'
					})
				}
			})
			
			const toPutId=(assetApplyId)=>{
				uni.navigateTo({
					url: `/pages/assets/assetApply/putList?byAssetApplyId=${assetApplyId}`,
				})
			}

			const toPut = () => {
				uni.navigateTo({
					url: `/pages/assets/assetApply/putList?assetApplyId=${detailInfo.value.assetApplyId}`,
				})
			}
			const toConfirm = () => {
				uni.navigateTo({
					url: `/pages/assets/assetApply/inList?assetApplyId=${detailInfo.value.assetApplyId}`,
				})
			}
			// 扫码签收
			const qrSign = () => {
				uni.scanCode({
					success: function(res) {
						console.log(res)
						if (res.scanType === 'QR_CODE') {
							//二维码扫描
							uni.navigateTo({
								url: '/pages/assets/assetApply/qrSign?qrCode=' + res
									.result,
							})
						}
					}
				});
			}
			return {
				detailInfo,
				listData,
				remarks,
				toPut,
				toPutId,
				toConfirm,
				qrSign
			}
		},
	})
</script>

<style scoped lang="scss">
	uni-page-body{
		overflow: hidden;
				// padding-bottom: 60px;
	}
	
	.assetMain {
		background-color: #eee;
		font-size: 14px;
		height: 92%;
		overflow: auto;
	}

	.assetNav {
		display: flex;
		flex-wrap: row nowrap;
		justify-content: space-around;
		padding: 15px;
		background-color: #fff;
	}

	.assetList {
		padding: 10px;
	}

	.itemHead {
		position: relative;
		border-bottom:1px solid #ddd ;
	}

	.assetListItem {
		margin-top: 15px;
		background-color: #fff;
		border-radius: 5px;
	}

	.assetListItem:first-child {
		margin-top: 0;
	}

	.itemHeadTitle {
		width: 80%;
		text-indent: 15px;
		height: 35px;
		line-height: 35px;
		font-weight: bold;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display:-webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		
	}

	.itemHeadState {
		position: absolute;
		right: 0;
		top: 6px;
		display: inline-block;
		background-color: burlywood;
		font-size: 11px;
		color: #fff;
		padding: 3px 12px;
		border-radius: 15px 0 0 15px;
	}

	.itemContent {
		font-size: 15px;
		box-sizing: border-box;
		padding: 15px 10px;
		border-bottom: 1px solid #eee;

	}
	.conCenter,.det-list{
		line-height: 25px;
		color: #666;
	}
	.det-list{
		margin-top: 10px;
		width: 95%;
		padding: 10px;
		background-color: #f6f6f6;
		border-radius: 10px;
	}


	.itemHand {
		padding: 15px;
		display: flex;
		justify-content: flex-end;
	}

	.itemHand>view {
		padding: 4px 23px;
		margin-right: 15px;
	}

	.buttons {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
	}
	.applybtn{
		width: 30%;
		border-radius: 30px;
		line-height: 30px;
		font-size: 14px;
	}

</style>
